<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide1</div>
      <div class="swiper-slide">Slide2</div>
      <div class="swiper-slide">Slide3</div>
      <div class="swiper-slide">Slide4</div>
      <div class="swiper-slide">Slide5</div>
      <div class="swiper-slide">Slide6</div>
      <div class="swiper-slide">Slide7</div>
      <div class="swiper-slide">Slide8</div>
      <div class="swiper-slide">Slide9</div>
    </div>
    <!-- <div class="swiper-button-prev"></div> -->
    <!-- <div class="swiper-button-next"></div> -->
  </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
// import "swiper/dist/js/swiper.min.js";
export default {
  mounted() {
    this.initSwiper();
  },

  methods: {
    //初始化swiper
    initSwiper() {
      this.$nextTick(() => {
        new Swiper(".swiper-container", {
          autoplay: false,
          slidesPerView: 4,
          slidesPerGroup: 4,
          spaceBetween: 0,
          prevButton: ".swiper-button-prev",
          nextButton: ".swiper-button-next",
        });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.swiper-slide {
  width: 100%;
  height: 100px;
  background-color: #f88;
}
</style>
